import { Component } from 'react';
import React from 'react';
import { connect } from 'umi';
import { TableListItem } from '@/pages/ListTableList/data';
import { FormValueType } from '@/pages/ListTableList/components/UpdateForm';
import HighPerformTable from '@/components/HighPerformTable';
import KeywordFilterSearch from '@/components/KeywordFilterSearch';
import { MehTwoTone, PlusOutlined } from '@ant-design/icons';
import { Button, Card, Col, Row, Select, Statistic } from 'antd';
import APIS from '@/apis';
import CustomCascader from '@/components/CustomCascader/CustomCascader';
import FilterByStatistics from '@/components/FilterByStatistics';

class StudentStat extends Component<any, any> {
  actionRef: any;

  state = {
    filter:-1,
    allCourse: [],
    total:0,
  }

  componentDidMount(){
    APIS.CourseAPI.GetCourseList({
      current: 1,
      pageSize: 99999,
      state: -1
    }).then(res => this.setState({allCourse: res.data})).catch(e => {
      console.error(e)
    })
  }

  requestGetData(
    params: {
      pageSize?: number;
      current?: number;
    },
    sorter: {
      [key: string]: 'ascend' | 'descend';
    },
    filter: {
      [key: string]: React.ReactText[];
    },
  ) {
    return APIS.StatAPI.GetStatStudent({ ...params, sorter, filter ,id: this.state.filter}).then((res)=>{
      var data = res.data
      const result = {
        data: data.records,
        total: data.total,
        success: true,
        pageSize: data.size,
        current: parseInt(`${data.current}`, 10) || 1,
      };
      this.setState({
        total:data.total,
      })
      return result;
    });
  }

  handleUpdateModalVisible(value: boolean) {}
  handleUpdate(value: FormValueType) {
    return false;
  }
  clomns: any = [
    {
      title: '姓名',
      dataIndex: 'trueName',
      rules: [
        {
          required: true,
          message: '试卷名称为必填项',
        },
      ],
    },
    {
      title: '课程名称',
      dataIndex: 'courseName',
      valueType: 'textarea',
    },
    {
      title: '课程形式',
      dataIndex: 'mode',
      render:(a,r)=>{
        switch(r.mode){
          case 1: return "虚拟仿真"
          case 2: return "交互体验"
          case 3: return "直播课"
          case 4: return "文章课"
        }
        return "未定义"
      }
    },
    {
      title: '选课时间',
      dataIndex: 'createdTime',
      hideInForm: true,
    },
  ];
  render() {
    const {allCourse} = this.state;
    return (
      <div>
        <FilterByStatistics
          placeholder={"请选择课程"}
          course={allCourse}
          getValue={(value) => {
            this.setState({filter: value});
            this.actionRef?.reload();
          }}

        >
          
        </FilterByStatistics>
        <Row gutter={16}>
          <Col span={8}>
            <Card>
              <Statistic
                title="选课人数"
                value={this.state.total}
                // precision={2}
                valueStyle={{ color: '#3f8600' }}
                // prefix={<ArrowUpOutlined />}
                // suffix="人"
              />
            </Card>
          </Col>
          
        </Row>
        {/* <CustomCascader datasource={[{
          placeholder: "请选择课程",
          dataGet: (values) => APIS.OrgsAPI.SearchGetSchoolList({ current: 1, pageSize: 100 }), renderOption: (data) => {
            return <Select.Option key={data.id} value={data.id}>{data.name}</Select.Option>
          }
        }]}></CustomCascader> */}
        <HighPerformTable<any>
          columns={this.clomns}
          requestGetData={this.requestGetData.bind(this)}
          hideOptions
          action
          ref={(ref) => (this.actionRef = ref)}
        />
      </div>
    );
  }
}

export default connect()(StudentStat);
